<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tw homework</title>
</head>
<body>
    <div class="layout-warpper">
        <div class="layout-container menu-layout-static">
            <div class="topbar md-showdown">
                <div class="top_box container-xl">
                        <a href="#" class="navicon-button" id="nav">
                                <i class="icon-navicon"></i>
                        </a>
                        <img class="logo" src="assets/layout/images/logo.svg">
                        <ul class="topbar-items">
                            <li class="profile-item">
                               <a href="#">
                                   <img src="assets/layout/images/person.png">
                                   <i class="icon-angle-down"></i>
                               </a>
                               <ul class="personal">
                                   <li>
                                       <a>
                                           <i class="icon-id-card font-size-20"></i>
                                           <span class="ml-5px">Profile</span>
                                       </a>
                                      
                                   </li>
                                   <li>
                                    <a >
                                        <i class="icon-sign-in font-size-20"></i>
                                        <span class="ml-5px">Sign Out</span>
                                    </a>
                                   </li>
                               </ul>
                            </li>
                        </ul>
                </div> 
            </div>
            <section class="main-section container-xl">
                    <div class="layout-menu">
                        <a class="menu-close fr">
                            <i class="icon-close font-size-16"></i>
                        </a>
                        <ul class="cruise-menu">
                            <li>
                                <a>
                                    <i class="icon-dashboard"></i>
                                    <span class="text-dashboard">DASHBOARD</span>
                                </a>
                                <ul></ul>
                            </li>
                            <li>
                                <a>
                                    <i class="icon-sitemap"></i>
                                    <span>AGENT</span>
                                </a>
                                <ul></ul>
                            </li>
                            <li>
                                <a>
                                    <i class="icon-boat"></i>
                                    <span>MY CRUISE</span>
                                </a>
                                <ul></ul>
                            </li>
                            <li>
                                <a>
                                    <i class="icon-life-bouy"></i>
                                    <span>HELP</span>
                                </a>
                                <ul></ul>
                            </li>
                        </ul>
                        <div class="history-container">
                           <h1>History</h1> 
                           <ul class="history-list font-size-12">
                                <li><a href="">bjstdmngbgr02/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr03/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr04/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr05/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr06/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr07/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr08/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr09/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr11/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr12/Acceptance_test</a></li>
                                <li><a href="">bjstdmngbgr13/Acceptance_test</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="layout-main">
                        <div class="layout-content">
                            <div class="row">
                                <div class="col-sm-6 col-md-4">
                                    <div class="card d-flex bg-yellow col-12">
                                        <span class="font-size-18">Building</span>
                                        <i class="icon-cog font-size-144 "></i>
                                        <span class="align-self-end font-size-48">3</span>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <div class="card d-flex bg-green col-12">
                                        <span class="font-size-18">Idle</span>
                                        <i class="icon-coffee font-size-144"></i>
                                        <span class="align-self-end font-size-48">5</span>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 count-info">
                                    <div class="card d-flex bg-white no-gutters text-align-center flex-wrap">
                                        <div class="overview d-flex col-sm-4 col-xl-4 col-md-12  flex-wrap ">
                                                <span class="align-self-center col-xl-12 col-md-6">All</span>
                                                <em class="align-self-center col-xl-12 col-md-6">8</em>
                                        </div>
                                        <div class="overview d-flex  col-sm-4 col-xl-4 col-md-12  flex-wrap no-gutters">
                                                <span class="align-self-center col-xl-12 col-md-6">PHYSICAL</span>
                                                <em class="align-self-center col-xl-12 col-md-6">4</em>
                                        </div>
                                        <div class="overview d-flex  col-sm-4 col-xl-4 col-md-12  flex-wrap">
                                                <span class="align-self-center col-xl-12 col-md-6">VIRTUAL</span>
                                                <em class="align-self-center col-xl-12 col-md-6">4</em>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row bg-white no-gutters margin-top-16px">
                               <div class="col-sm-12 col-md-5 order-sm-1  order-md-0">
                                 <ul class="d-flex tab text-align-center ">
                                     <li class="col-4">ALL</li>

                                     <li class="col-4">Physical</li>
                                     <li class="col-4">Virtual</li>
                                 </ul>
                               </div>
                               <div class="col-sm-12 col-md-7">
                                   <div class="search-box d-flex bg-white align-items-center">
                                       <div class="search d-flex align-items-center col-sm-12 col-md-auto no-gutters">
                                            <i  class="icon-search font-size-20"></i>
                                            <input type="text" class="no-border col-sm-11 col-md-auto"/>
                                       </div> 
                                       <div class="icon-col ml-auto d-sm-none d-md-block">
                                            <i class="icon-th-card font-size-20"></i>
                                            <i class="icon-th-list font-size-20"></i>
                                        </div>
                                   </div>
                               </div>
                            </div>
                            <div class="row margin-top-16px bg-white no-gutters">
                               <div class="col-xl-2">
                                   <img src="assets/layout/images/windows.png" alt="" class="item-logo pd-16px">
                               </div>
                               <div class="col-sm-12 col-xl-10">
                                   <ul class="tab-list d-flex flex-wrap align-items-center no-gutters text-align-center pd-16px">
                                       <li class="d-flex col-sm-12 col-md-6">
                                           <a >
                                               <i class="icon-desktop font-size-16"></i>
                                               <a href="" class="text-primary ml-5px">bjstdmngbgr01.thoughtworks.com</a>
                                               <span class="bg-green ml-16px pd-3-5px">idle</span>
                                           </a>
                                       </li>
                                       <li class="d-flex col-sm-12 col-md-3">
                                        <a>
                                            <i class="icon-info font-size-16"></i>
                                            <a href="">192.168.1.102</a>
                                        </a>
                                       </li>
                                       <li class="d-flex  col-sm-12 col-md-3">
                                        <a>
                                            <i class="icon-folder font-size-16"></i>
                                            <a href="">/var/lib/cruise-agent</a>
                                        </a>
                                       </li>
                                       <li class="d-flex col-sm-12 flex-wrap no-gutters">
                                            
                                            <i class="icon-plus font-size-18 bg-primary text-white pd-5px "></i>
                                          
                                                    <div class="d-flex"> 
                                                        <button class="font-size-16 ui-button-default ml-5px">
                                                            <span>Firefox</span>
                                                            <i class="icon-trash"></i>
                                                        </button>
                                                        <button class="font-size-16 ui-button-default ml-5px">
                                                            <span>Safari</span>
                                                            <i class="icon-trash"></i>
                                                        </button>
                                                    </div>
                                                    <div class="d-flex col-sm-12 col-md-auto">
                                                           <button class="font-size-16 ui-button-default ml-5px">
                                                                    <span>Ubuntu</span>
                                                                    <i class="icon-trash"></i>
                                                           </button>
                                                           <button class="font-size-16 ui-button-default ml-5px">
                                                                    <span>Chrome</span>
                                                                    <i class="icon-trash"></i>
                                                            </button>
                                                    </div>
                                                    <div class="d-flex ml-auto col-sm-12 col-md-auto justify-content-end d-sm-none">
                                                        <button class="ui-button-primary pd-5-10px text-white">
                                                            <i class="icon-deny "></i>
                                                            <span>Deny</span>
                                                        </button>
                                                     </div> 
                                                     
                                                                        
                                       </li>
                        
                                   </ul>
                                 </div>
                            </div>
                            <div class="row margin-top-16px bg-white no-gutters">
                                <div class="col-xl-2">
                                    <img src="assets/layout/images/windows.png" alt="" class="item-logo pd-16px">
                                </div>
                                <div class="col-sm-12 col-xl-10">
                                    <ul class="tab-list d-flex flex-wrap align-items-center no-gutters text-align-center pd-16px">
                                        <li class="d-flex col-sm-12 col-md-6">
                                            <a >
                                                <i class="icon-desktop font-size-16"></i>
                                                <a href="" class="text-primary ml-5px">bjstdmngbgr08.thoughtworks.com</a>
                                                <span class="bg-yellow ml-16px pd-3-5px">building</span>
                                            </a>
                                        </li>
                                        <li class="d-flex col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-info font-size-16"></i>
                                             <a href="">192.168.1.243</a>
                                         </a>
                                        </li>
                                        <li class="d-flex  col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-folder font-size-16"></i>
                                             <a href="">/var/lib/cruise-agent</a>
                                         </a>
                                        </li>
                                        <li class="d-flex col-sm-12 flex-wrap no-gutters">
                                             
                                             <i class="icon-plus font-size-18 bg-primary text-white pd-5px "></i>
                                           
                                           
                                                <div class="d-flex"> 
                                                    <button class="font-size-16 ui-button-default ml-5px">
                                                        <span>Firefox</span>
                                                        <i class="icon-trash"></i>
                                                    </button>
                                                    <button class="font-size-16 ui-button-default ml-5px">
                                                        <span>Safari</span>
                                                        <i class="icon-trash"></i>
                                                    </button>
                                                </div>
                                        
                                                    
                                                     <div class="d-flex ml-auto col-sm-12 col-md-auto justify-content-end">
                                                        <button class="ui-button-primary pd-5-10px text-white">
                                                            <i class="icon-deny "></i>
                                                            <span>Deny</span>
                                                        </button>
                                                     </div> 
                                        </li>
                                    </ul>
                                  </div>
                            </div>
                            <div class="row margin-top-16px bg-white no-gutters">
                                <div class="col-xl-2">
                                    <img src="assets/layout/images/ubuntu.png" alt="" class="item-logo pd-16px">
                                </div>
                                <div class="col-sm-12 col-xl-10">
                                    <ul class="tab-list d-flex flex-wrap align-items-center no-gutters text-align-center pd-16px">
                                        <li class="d-flex col-sm-12 col-md-6">
                                            <a >
                                                <i class="icon-desktop font-size-16"></i>
                                                <a href="" class="text-primary ml-5px">bjstdmngbgr10.thoughtworks.com</a>
                                                <span class="bg-yellow ml-16px pd-3-5px">building</span>
                                            </a>
                                        </li>
                                        <li class="d-flex col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-info font-size-16"></i>
                                             <a href="">192.168.1.80</a>
                                         </a>
                                        </li>
                                        <li class="d-flex  col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-folder font-size-16"></i>
                                             <a href="">/var/lib/cruise-agent</a>
                                         </a>
                                        </li>
                                        <li class="d-flex col-sm-12 flex-wrap no-gutters">
                                             
                                             <i class="icon-plus font-size-18 bg-primary text-white pd-5px "></i>
                                           
                                                     <div class="d-flex"> 
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                             <span>Firefox</span>
                                                             <i class="icon-trash"></i>
                                                         </button>
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                             <span>Safari</span>
                                                             <i class="icon-trash"></i>
                                                         </button>
                                                     </div>
                                                     <div class="d-flex ml-auto col-sm-12 col-md-auto justify-content-end">
                                                        <button class="ui-button-primary pd-5-10px text-white">
                                                            <i class="icon-deny "></i>
                                                            <span>Deny</span>
                                                        </button>
                                                      </div> 
                                                                         
                                        </li>
                                    </ul>
                                  </div>
                            </div>
                            <div class="row margin-top-16px bg-white no-gutters">
                                <div class="col-xl-2">
                                    <img src="assets/layout/images/debin.png" alt="" class="item-logo pd-16px">
                                </div>
                                <div class="col-sm-12 col-xl-10">
                                    <ul class="tab-list d-flex flex-wrap align-items-center no-gutters text-align-center pd-16px">
                                        <li class="d-flex col-sm-12 col-md-6">
                                            <a >
                                                <i class="icon-desktop font-size-16"></i>
                                                <a href="" class="text-primary ml-5px">bjstdmngbgr11.thoughtworks.com</a>
                                                <span class="bg-green ml-16px pd-3-5px">idle</span>
                                            </a>
                                        </li>
                                        <li class="d-flex col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-info font-size-16"></i>
                                             <a href="">192.168.1.110</a>
                                         </a>
                                        </li>
                                        <li class="d-flex  col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-folder font-size-16"></i>
                                             <a href="">/var/lib/cruise-agent</a>
                                         </a>
                                        </li>
                                        <li class="d-flex col-sm-12 flex-wrap no-gutters">
                                             
                                             <i class="icon-plus font-size-18 bg-primary text-white pd-5px "></i>
                                           
                                                     <div class="d-flex"> 
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                             <span>Firefox</span>
                                                             <i class="icon-trash"></i>
                                                         </button>
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                             <span>Safari</span>
                                                             <i class="icon-trash"></i>
                                                         </button>
                                                         
                                                     </div>  
                                                     <div class="d-flex col-sm-12 col-md-auto">
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                                     <span>Ubuntu</span>
                                                                     <i class="icon-trash"></i>
                                                            </button>
                                                            <button class="font-size-16 ui-button-default ml-5px">
                                                                     <span>Chrome</span>
                                                                     <i class="icon-trash"></i>
                                                             </button>
                                                     </div>
                                                     <div class="d-flex ml-auto col-sm-12 col-md-auto justify-content-end ">
                                                        <button class="ui-button-primary pd-5-10px text-white">
                                                            <i class="icon-deny "></i>
                                                            <span>Deny</span>
                                                        </button>
                                                      </div>  
                                                                         
                                        </li>
                                    </ul>
                                  </div>
                            </div>
                            <div class="row margin-top-16px bg-white no-gutters">
                                <div class="col-xl-2">
                                    <img src="assets/layout/images/suse.png" alt="" class="item-logo pd-16px">
                                </div>
                                <div class="col-sm-12 col-xl-10">
                                    <ul class="tab-list d-flex flex-wrap align-items-center no-gutters text-align-center pd-16px">
                                        <li class="d-flex col-sm-12 col-md-6">
                                            <a >
                                                <i class="icon-desktop font-size-16"></i>
                                                <a href="" class="text-primary ml-5px">bjstdmngbgr11.thoughtworks.com</a>
                                                <span class="bg-green ml-16px pd-3-5px">idle</span>
                                            </a>
                                        </li>
                                        <li class="d-flex col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-info font-size-16"></i>
                                             <a href="">192.168.1.110</a>
                                         </a>
                                        </li>
                                        <li class="d-flex  col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-folder font-size-16"></i>
                                             <a href="">/var/lib/cruise-agent</a>
                                         </a>
                                        </li>
                                        <li class="d-flex col-sm-12 flex-wrap no-gutters">
                                             
                                             <i class="icon-plus font-size-18 bg-primary text-white pd-5px "></i>
                                             <div class="d-flex ml-auto col-sm-12 col-md-auto justify-content-end d-sm-none">
                                                <button class="ui-button-primary pd-5-10px text-white">
                                                    <i class="icon-deny "></i>
                                                    <span>Deny</span>
                                                </button>
                                             </div>                            
                                        </li>
                                    </ul>
                                  </div>
                            </div>
                            <div class="row margin-top-16px bg-white no-gutters">
                                <div class="col-xl-2">
                                    <img src="assets/layout/images/cent_os.png" alt="" class="item-logo pd-16px">
                                </div>
                                <div class="col-sm-12 col-xl-10">
                                    <ul class="tab-list d-flex flex-wrap align-items-center no-gutters text-align-center pd-16px">
                                        <li class="d-flex col-sm-12 col-md-6">
                                            <a >
                                                <i class="icon-desktop font-size-16"></i>
                                                <a href="" class="text-primary ml-5px">bjstdmngbgr11.thoughtworks.com</a>
                                                <span class="bg-green ml-16px pd-3-5px">idle</span>
                                            </a>
                                        </li>
                                        <li class="d-flex col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-info font-size-16"></i>
                                             <a href="">192.168.1.110</a>
                                         </a>
                                        </li>
                                        <li class="d-flex  col-sm-12 col-md-3">
                                         <a>
                                             <i class="icon-folder font-size-16"></i>
                                             <a href="">/var/lib/cruise-agent</a>
                                         </a>
                                        </li>
                                        <li class="d-flex col-sm-12 flex-wrap no-gutters">
                                             
                                             <i class="icon-plus font-size-18 bg-primary text-white pd-5px "></i>
                                           
                                                     <div class="d-flex"> 
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                             <span>Firefox</span>
                                                             <i class="icon-trash"></i>
                                                         </button>
                                                         <button class="font-size-16 ui-button-default ml-5px">
                                                             <span>Safari</span>
                                                             <i class="icon-trash"></i>
                                                         </button>
                                                     </div>
                                                     <div class="d-flex col-sm-12 col-md-auto">
                                                            <button class="font-size-16 ui-button-default ml-5px">
                                                                     <span>Ubuntu</span>
                                                                     <i class="icon-trash"></i>
                                                            </button>
                                                            <button class="font-size-16 ui-button-default ml-5px">
                                                                     <span>Chrome</span>
                                                                     <i class="icon-trash"></i>
                                                             </button>
                                                     </div> 
                                                     <div class="d-flex ml-auto col-sm-12 col-md-auto justify-content-end d-sm-none">
                                                        <button class="ui-button-primary pd-5-10px text-white">
                                                            <i class="icon-deny "></i>
                                                            <span>Deny</span>
                                                        </button>
                                                     </div>    
                                                                         
                                        </li>
                                    </ul>
                                  </div>
                            </div>
                        </div>
                    </div>
            </section>
            <div class="dialog">
                <div class="backdrop">
                   
                </div>
                <div class="dialog-wrapper pd-10px">
                    <i class="icon-close font-size-24 text-primary close-dialog"></i>
                    <div class="d-flex pd-5px">
                            <span class="mr-auto">Separate multiple resource name commas</span>
                            
                    </div>
                   <div class="d-flex pd-5px">
                    <input type="text" class="col-12 text-input pd-5-10px text-primary " id="inputValue">
                   </div>
                   <div class="pd-5px ">
                       <button class="ui-button-primary font-size-16 text-white add-resource col-sm-12 col-md-auto">Add Resource</button>
                       <button class="ui-button-secondary font-size-16 text-white ml-16px  dia-cancel-btn col-sm-12 col-md-auto">Cancel</button>
                   </div>
                </div>
            </div>
            <div class="layout-mask">
            
            </div>
        </div>
     </div>
</body>
</html>